<template>
	<view class="container">
		<view class="banner">
			<view class="top">
				<image class="top_img"
					src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/fbaf030b9f044fd0a65e15d459020245s2z6yc3f0o.png"
					mode="widthFix"></image>
				<view class="title"></view>
			</view>
		</view>
		<view class="banner-title">
			欢迎开通会员!
			<image src="https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/18358c8d5cee43268071c7e7c2055b960gb16tqx2l.png"></image>
		</view>
		<view class="main">
			<view class="member-detail">
				<view v-if="userInfo" class="userInfo">
					<image :src="userInfo.avatar"></image>
					<view class="user">
						{{userInfo.nickname}}
					</view>
				</view>
				<view v-if="!vip" class="content">
					尚未开通会员，无法享受会员权益
				</view>
				<view v-if="vip" class="content">
					您已开通会员，畅享会员权益
				</view>
				<view class="title">
					{{!vip?'未开通':'已开通'}}
				</view>
			</view>
			
			<view class="card">
				<view @click="handleClick(index)" :class='{click:index==card}' class="card-detail" v-for="(item,index) in cardList">
					<view class="sale">
						{{item.vipDescribe}}
					</view>
					<view class="detail">
						<view class="title">
							{{item.vipName}}
						</view>
						<view class="price">
							￥ <span class="value">{{item.price/100}}</span>
						</view>
						<view class="oldPrice">
							￥ <span class="oldValue">{{item.originalPrice}}</span>
						</view>
						<view class="period">
							{{item.period}} <view class="number">{{item.availableEntitlements}}</view>片
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view>推荐会员连续包月，每月可拥有超值特权</view>
				<view>购买须知</view>
			</view>
			<view class="VIP">
				<view class="board">
					<view class="head">
						<view class="title">
							<view style="font-family: AliHYAiHei;color: #f66755;">VIP</view>
							<view >会员权益</view>
						</view>
						<view class="tip">
							包含31天会员时长
						</view>
					</view>
					<view class="equity">
						<view class="equity-item" v-for="equity in equityList">
							<image :src="equity.icon"></image>
							<view class="title">
								{{equity.title}}
							</view>
							<view class="tip">
								{{equity.tip}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tips">
				<view>
					确认购买井支付后，将通过您的iTunes账号自动续订。苹果iTunes账户会在到期前24小时内扣费，扣费成功后订阅周期顺延一个订阅周期。如需取消续订，请在当前订阅周期到期前24小时以前，手动在ITunes/ApplelD设置管理中关闭自动续费功能。试用期内，iTunes账户如不取消订阅，则会在试用期结束时自动开通订阅并扣款，未使用的试用时长在购买订阅之后将会自动作度。
				</view>
				<view>
					更多细则请见 曼德呵护会员服务协议 · 用户隐私协议 · 曼德呵护用户协议 · 会员服务自动续费协议
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="pay-detail">
				<button @click="pay" class="btn">￥{{cardList[card].price/100}} 确认协议并结算</button>
				<u-checkbox @change="()=>agreement=!agreement" shape="circle" activeColor="#fc6873" iconSize="30" iconColor="#fff" size="30" labelSize="20" labelColor="#bbbbbb" label="开通前请阅读《会员协议》（含自动续费条款）" :value="agreement" ></u-checkbox>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import '../static/font-icon.css'
	import {
		payMember,
		memberDetail,
		memberList
	} from '../../../api/menber'
	import {
		mapGetters
	} from "vuex";
	import app from '../../../store/modules/app'
	import weixin from '@/pages/user/static/images/weixin.png'
	export default {
		data() {
			return {
				agreement:false,
				card: 0,
				vip:null,
				equityList: [{
					icon:"https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/5a2ada2379214c51a49ccbdbb9bd4a74xfks6fhikp.png",
					title: "会员积分",
					tip: "720说明"
				}, {
					icon:"https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/ed9a8bf67f4040839429e53dfb5f44a5rli42o39zz.png",
					title: "优惠券",
					tip: "价值10元"
				},{
					icon:"https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/b03b8bc518ab48a9bfb2e604f4e9b811svimsce1mw.png",
					title: "联名会员卡",
					tip: "价值3元"
				},{
					icon:"https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/b701bb7a6e064ba0b68a01f2b44d76c6ly24m1x5xn.png",
					title: "商城折扣",
					tip: "5折对换好礼"
				}],
				cardList: [],
			}
		},
		computed: mapGetters(['userInfo']),
		methods: {
			handleClick(index) {
				this.card = index
			},
			pay() {
				if(!this.agreement){
					this.$refs.uToast.show({
						message: '请同意协议'
					})
					return
				}
				uni.getProvider({
					service: 'oauth'
				}).then(providerData => {
					let provider = providerData[1].provider[0]
					uni.login({
						provider: provider,
					}).then(codeData => {
						let code = codeData[1].code
						payMember(code, this.card+1).then(res => {
							uni.requestPayment({
								"appId": res.data.appId,
								"nonceStr": res.data.nonceStr,
								"package": res.data.package,
								"timeStamp": res.data.timeStamp,
								"paySign": res.data.paySign,
								"signType": 'RSA',
								success: () => {
									this.$refs.uToast.show({
										message: '支付成功'
									})
									uni.navigateBack(-1)
								},
								fail: () => {
									this.$refs.uToast.show({
										message: '支付取消'
									})
								}
							})
						})
					})
				})
			}
		},
		onLoad() {
			memberList().then(res=>{
					this.cardList = res.data
					this.cardList[0].period = '每月'
					this.cardList[1].period = '每月'
					this.cardList[2].period = '每季度'
					this.cardList[3].period = '每年'
			})
		},
		onShow(){
			memberDetail(uni.getStorageSync('UID')).then(res=>{
				if(res.data.length>0){
					this.vip = true
				}else{
					this.vip = false
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/09/207f5691c3c747c9829b2fc3c50abc69v335ghrhl1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 120vh;
		
		.banner {
			background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/18/7624c0c5e06742319a354286bc09faa8dqftjq3zwz.png');
			background-repeat: no-repeat;
			background-size: cover;
			padding-bottom: 20rpx;
		
			.top {
				display: flex;
				align-items: center;
				gap: 20rpx;
				padding: 30rpx;
				padding-bottom: 10rpx;
		
				.top_img {
					width: 100rpx;
				}
		
				.title{
					width: 500rpx;
					height: 62rpx;
					background-image: url('https://yueshibaohe.com:443//crmebimage/public/maintain/2024/11/21/3ffb71b55b374486a482f3791462c674vtmr4u0at9.png');
					background-repeat: no-repeat;
				}
			}
		}
		
		.banner ::v-deep .banner{
			padding-bottom: 200rpx;
		}
		
		.banner-title{
		  position: absolute;
		  top: 50rpx;
		  right: 40rpx;
		  color: #f86b57;
			display: flex;
			align-items: center;
			
			image{
				margin-left: 20rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}
	
		.main{
			position: relative;
			padding: 0 50rpx;
			
			.member-detail{
				width: 100%;
				height: 200rpx;
				background-image: url("https://yueshibaohe.com:443//crmebimage/public/maintain/2024/12/18/b99b0cb9f8ea4f208042a8c43f33d296xa5c5znz6y.png");
				background-size: 111% 110%;
				background-position: -70rpx 0rpx;
				padding: 40rpx;
				
				.title{
					position: absolute;
					top: 8rpx;
					right: 65rpx;
					color: #fff;
				}
				
				.userInfo{
					display: flex;
					align-items: center;
					
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					
					.user{
						font-size: 40rpx;
						font-weight: 700;
					}
					
				}
				.content{
					color: #eaa7a2;
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}
		
			.card {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				margin-top: 70rpx;
				grid-column-gap: 16rpx;
			
				.card-detail {
					border: #e1e1e1 solid 2rpx;
					border-radius: 20rpx;
					box-shadow: 0px 1px 1px 1px #e1e1e1;
			
					.sale {
						padding: 10rpx 0;
						text-align: center;
						background-color: #f86853;
						font-size: 20rpx;
						color: #fff;
						border-radius: 20rpx 20rpx 0 0;
					}
			
					.detail {
						display: flex;
						height: 180rpx;
						flex-direction: column;
						align-items: center;
						justify-content: space-evenly;
			
						.title {
							font-weight: 800;
							font-size: 30rpx;
						}
			
						.value {
							font-size: 50rpx;
							font-weight: 800;
							color: #000;
						}
						.oldPrice{
							color: #919191;
							font-size: 20rpx;
							text-decoration: line-through;
						}
						.period{
							font-size: 20rpx;
							font-weight: 800;
							
							.number{
								display: inline-block;
								color: #ef9186;
							}
						}
					}
				}
				
				.card-detail.click {
					background-color: #fdedec;
					box-shadow: 0px 2px 2px 2px #ea7c69;
					
					.value{
						color: #ef6756;
					}
				}
			}
			
			.content{
		    color: #b7b7b7;
		    font-size: 24rpx;
		    margin-top: 24rpx;
		    width: 100%;
		    display: flex;
		    justify-content: space-between;
			}
			
			.VIP{
				border-radius: 30rpx;
				box-shadow: 0px 0px 2px 4px #f7f7f7;
				background: #fff;
				padding: 50rpx;
				margin-top: 50rpx;
				
				.head{
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.title{
						display: flex;
						font-size: 40rpx;
						font-weight: 800;
						letter-spacing: 3rpx;
					}
						
					.tip{
						color: #cbcbcb;
						font-size: 26rpx;
					}
				}
				
				.equity{
					margin-top: 30rpx;
					display: grid;
					grid-template-columns: 1fr 1fr 1fr 1fr;
					
					.equity-item{
						height: 220rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
					}
					image{
						width: 100rpx;
						height: 100rpx;
					}
					
					.title{
						font-weight: 700;
					}
					
					.tip{
						color: #b8b8b8;
						font-size: 22rpx;
					}
				}
			}
		
			.tips{
				font-size: 26rpx;
				color: #c5c5c5;
				padding: 40rpx;
			}
		}
	
		.pay {
			width: 100%;
			position: fixed;
			bottom: 5rpx;
			display: flex;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			justify-content: center;
			padding-bottom: 50rpx;
		
			.btn {
				padding: 10rpx 100rpx;
				background-color: #f8687d;
				border-radius: 40rpx;
				color: #fff;
			}
			.checkbox{
				color: #bbbbbb;
			}
		}
	
	}
	
</style>